<!--
 * @Author: 李环玉 834654733@qq.com
 * @Date: 2023-12-16 02:46:45
 * @LastEditors: 李环玉 834654733@qq.com
 * @LastEditTime: 2024-01-08 20:23:29
 * @FilePath: \nuxt-app\layouts\backgroud.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="bg-box" >
    <div class="masking" ref="bgBoxRef" id="masking">
      <n-notification-provider>
        <WebHeader />
      </n-notification-provider>
      <div class="bg-box-slot">
        <slot />
        <WebFooter />
      </div>
      
     
    </div>
  </div>
</template>

<script setup>
import { useScrollTop } from '~/composables/useScroll'
const scrollTop = useScrollTop()
onMounted(() => {
  if(process.client){
    let targetDiv  = document.getElementById('masking')
    targetDiv.addEventListener('scroll',e => {
      scrollTop.value = e.target.scrollTop
    })
  }
})
</script>
<script>
  export default {
    layout: "backgroud",
  }
</script>
<style lang="scss">
.masking{
  height: 100vh;
  overflow-y: auto;
}
.bg-box{
  &-slot{
    padding-top: 60px;
    height: auto;
    
  }
}
</style>